<template>
	<view class="joe-game-item">
		<image mode="widthFix" :src="value.img"></image>
		<view class="joe-game-item-name">
			<view>{{value.name}}</view>
			<view class="text">{{value.game_intro}}</view>
		</view>
		<view class="joe-game-item-but">
			<button v-if="value.game_type==0" @tap="bindTap()">开玩</button>
			<button v-else @tap="bindDown()">下载</button>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:Object,
				default:{
					name:'游戏名称',
					desc:'游戏描述内容的啦~',
					img:"../../static/HM-shophome/img/p1.jpg"
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			bindTap(){
				this.$emit('onStart',this.value)
			},
			bindDown(){
				this.$emit('onDown',this.value)
			}
		}
	}
</script>

<style lang="scss">
 .joe-game-item{
		border-radius: 20upx;
		background-color: #fff;
		margin: 0 0 15upx 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		image{
			padding: 2.5% 2.5% 2.5vw 2.5%; 
			width: 20%;
		}
		.joe-game-item-name{
			width: 60%;
			padding: 40upx 4%;
			display: -webkit-box;
			box-orient: vertical;
			-webkit-box-orient: vertical;
			font-size: 32upx;
			color: #ff570a;
			.text{
				font-size: 12upx;
				color:#666;
				margin-top: 20upx;
			}
		}
		.joe-game-item-but{
			width: 20%;
			padding: 10upx 4% 10upx 4%;
			button{
					width: 100upx;
					padding: 10upx 8upx;
					font-size: 24upx;
					line-height: 1.555556;
					-webkit-tap-highlight-color: transparent;
						color: #fff;
						background-color: #ff570a;
			}
		}
	} 
</style>
